<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建一个场景</title>
</head>

<body>
  <div class="container"></div>
  <script src="./ThreeJs/WebGL.js"></script>
  <script src="./ThreeJs/js/three.js"></script>
  <script>

    // 创建场景
    var scene = new THREE.Scene()
    // 创建相机 PerspectiveCamera（透视摄像机）
    // 第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是角度单位。
    // 第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
    // 最后两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    // 设置所需要的渲染区域的宽高
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 添加到dom中
    document.body.appendChild(renderer.domElement)

    // 创建一个立方体
    var geometry = new THREE.BoxGeometry(1, 1, 1)
    // 设置材质
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    // 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);

      // 旋转方块
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    }

    // WebGl1兼容性检查
    if (!WEBGL.isWebGLAvailable()) {
      // Initiate function or other initializations here
      animate();
    } else {
      var warning = WEBGL.getWebGLErrorMessage();
      // document.getElementById('container').appendChild(warning);
      document.body.appendChild(renderer.domElement)
    }


  </script>
</body>

</html>